<template>
	<view>
		<!-- 9.18 -->
		<view class="top-list">
			<view v-for="(goods,index) in navs" :key="index" class="item cross-center dir-left-nowrap"
				@click="goodsNav(goods.url)">
				<view class="goods-image box-grow-0">
					<image class="image" :src="goods.icon_url"></image>
					<view class="goods-name t-omit-three bold">{{goods.name}}</view>
				</view>
				<view class="rihgt box-grow-1">
					<view class="" :decode="true">
						点击查看 &nbsp; {{goods.params.content}}
					</view>
					<view class="" v-if="goods.params.describe">
						共<text class="lg red bold">{{goods.params.describe}}</text>金币送
					</view>
					<view class="" v-if="goods.params.describe">
						相当于赠送<text class="red bold">{{goods.params.describe}}</text>元人民币
					</view>
					<view class="bold right">
						点击进入>>>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="">
			<reward timenum="1" :available="available"></reward>
		</view> -->
		<!-- <view class="touch">
			<browe ref="countdown" :available="available" :time="time" :receive="receive" @finish="onFinish" :goldcoin="5">
				<template v-slot="{day, hour, minute, second, remain, time}"></template>
			</browe>
		</view> -->
	</view>
</template>

<script>
	var timee;
	import browe from '../../components/browe/browe.vue'

	export default {
		components: {
			browe
		},
		data() {
			return {
				navs: [],

				// 9.30 取消 浏览得金币
				// available: false,

				/* 移动所需参数 */
				flag: false,
				time: 15000,
				receive: false,

				// 9.27 赠送金币
				goldsnum: 2,

				// 列表页数
				page: 1,
				pagecount: 1
			}
		},
		// onPageScroll(object) {
		// 	// console.log('开始滚动');
		// 	clearTimeout(timee);
		// 	this.flag = false;
		// 	this.$refs.countdown.start()
		// 	timee = setTimeout(() => {
		// 		// console.log('结束滚动');
		// 		this.$refs.countdown.pause()
		// 		this.flag = true;
		// 	}, 500);
		// },
		onLoad(options) {
			this.page = 1
			this.allReq(2)
			// if (options.available) {
			// 	this.available = options.available
			// }
			if (options.goldsnum) {
				this.goldsnum = options.goldsnum
			}
		},
		// mounted() {
		// 	this.allReq(2)
		// },
		onReachBottom() {
			if (this.pagecount > this.page) {
				this.page++
				this.allReq(2)
			}
		},
		methods: {
			// fillWithZero(num, n) {
			// 	var len = num.toString().length;
			// 	while (len < n) {
			// 		num = "0" + num;
			// 		len++;
			// 	}
			// 	return num;
			// },
			onFinish() {
				this.receive = true
			},
			allReq(pid) {
				this.$request({
					url: this.$api.navs.list,
					data: {
						page: this.page,
						pid: pid,
						status: 1,
						limit: 10,
						// 取消拼团数据
						isnottuan: 1
					}
				}).then((res) => {
					if (res.code == 0) {
						if (pid == 2) {
							this.navs = this.navs.concat(res.data.list)
							this.pagecount = res.data.pagination.page_count
						}
					}
				}).catch(() => {

				})
			},
			goodsNav(item) {
				// 9.30 取消 浏览得金币
				uni.navigateTo({
					url: item
				})
				// if (item.indexOf('?') != -1) {
				// 	if (this.goldsnum) {
				// 		uni.navigateTo({
				// 			url: item + '&available=true&goldsnum=' + this.goldsnum
				// 		})
				// 	} else {
				// 		uni.navigateTo({
				// 			url: item + '&available=true'
				// 		})
				// 	}
				// } else {
				// 	if (this.goldsnum) {
				// 		uni.navigateTo({
				// 			url: item + '?available=true&goldsnum=' + this.goldsnum
				// 		})
				// 	} else {
				// 		uni.navigateTo({
				// 			url: item + '?available=true'
				// 		})
				// 	}
				// }
			}
		}
	}
</script>

<style scoped lang="scss">
	.floting {
		position: fixed;
		right: 40rpx;
		top: 156rpx;
		width: 138rpx;

		.flot-window {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 100%;
			height: 200rpx;
			overflow: hidden;

			.addgold {
				color: #ffae3c;
				font-size: 24rpx;
				position: absolute;
				top: -36rpx;
				opacity: 0;

				// height: 30rpx;
				animation: floatup 0.8s 1;

				@keyframes floatup {
					from {
						top: 36rpx;
						opacity: 1;
					}

					to {
						opacity: 0;
						top: -36rpx;
					}
				}
			}

			.gold {
				// position: relative;
				// top: 110rpx;
				// width: 104rpx;
				// height: 90rpx;
				margin-top: 36rpx;

				width: 90rpx;
				height: 90rpx;
				background-color: #ffea00;
				box-shadow: 0 0rpx 2rpx 0rpx #e2cf00;
				border-radius: 50%;
				text-align: center;
				line-height: 90rpx;
				color: #ffc410;
				font-size: 24rpx;
				text-shadow: 0 0rpx 2rpx #d3a20d;
			}

			.envelope {
				// position: relative;
				// top: 70rpx;
				animation: envelope 1.8s 1;

				@keyframes envelope {
					0% {
						top: 120rpx;
						transform: scaleY(1);
					}

					20% {
						top: 20rpx;
						transform: scaleY(1);
					}

					70% {
						top: 20rpx;
						transform: scaleY(1);
					}

					80% {
						top: 20rpx;
						transform: scaleY(1);
					}

					90% {
						top: 70rpx;
						transform: scaleY(0.9);
					}

					100% {
						top: 70rpx;
						transform: scaleY(1);
					}
				}

				.cover {
					width: 104rpx;
					height: 126rpx;
				}

				.btn {
					// position: absolute;
					// top: 20rpx;
					// left: calc(50% - 25rpx);
					width: 50rpx;
					height: 50rpx;
					animation: btn 0.3s 4;
					animation-direction: alternate;

					@keyframes btn {
						from {
							transform: scale(1);
						}

						to {
							transform: scale(0.6);
						}
					}
				}
			}
		}

		.bottom {
			width: 100%;
			height: 42rpx;
			background: linear-gradient(180deg, #ffe6ac 0%, #ffb66e 100%);
			border-radius: 92rpx;
			font-size: 20rpx;
			font-weight: 500;
			line-height: 42rpx;
			text-align: center;
			color: #854c00;
		}
	}

	.top-list {
		padding: 0 36rpx;
		font-size: 28rpx;
		line-height: 42rpx;

		.bold {
			font-weight: bold;
		}

		.red {
			color: #ff0000;
		}

		.lg {
			font-size: 36rpx;
		}

		.right {
			text-align: right;
		}

		.rihgt {
			padding: 0 0 0 36rpx;
		}

		.item {
			margin: 24rpx 0;
		}

		.goods-image {
			width: 144rpx;
			text-align: center;

			.image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>
